<script type="text/html" id="verification">
  <div class="message-header">
    <div class="message-header-icon">
      <!-- ko if: message.isTypeVerified() -->
        <verified-icon></verified-icon>
      <!-- /ko -->
      <!-- ko ifnot: message.isTypeVerified() -->
        <svg width="16" height="16">
          <use xlink:href="#icon-not-verified"></use>
        </svg>
      <!-- /ko -->
    </div>
    <div class="message-header-label">
      <!-- ko if: message.isTypeVerified() -->
        <span data-bind="l10n_text: z.string.tooltipConversationAllVerified"></span>
      <!-- /ko -->
      <!-- ko if: message.isTypeUnverified() -->
        <span class="message-header-sender-name" data-bind="text: message.sender_name()"></span>
        <span class="ellipsis" data-bind="l10n_text: z.string.conversationDeviceUnverified"></span>
        <span class="ellipsis text-theme" data-bind="click: clickOnDevice, text: message.captionUnverifiedDevice" data-uie-name="go-devices"></span>
      <!-- /ko -->
      <!-- ko if: message.isTypeNewDevice() -->
        <span class="message-header-plain-sender-name" data-bind='text: message.captionUser'></span>
        <span class="ellipsis" data-bind="text: message.captionStartedUsing"></span>
        <span class="ellipsis text-theme" data-bind="click: clickOnDevice, text: message.captionNewDevice" data-uie-name="go-devices"></span>
      <!-- /ko -->
      <!-- ko if: message.isTypeNewMember() -->
        <span class="ellipsis" data-bind="l10n_text: z.string.conversationDeviceNewPeopleJoined"></span>
        <span class="ellipsis text-theme" data-bind="click: clickOnDevice, l10n_text: z.string.conversationDeviceNewPeopleJoinedVerify" data-uie-name="go-devices"></span>
      <!-- /ko -->
      <hr class="message-header-line" />
    </div>
  </div>
</script>

<script type="text/html" id="call">
  <div class="message-header">
    <div class="message-header-icon">
      <!-- ko if: message.was_completed() -->
        <div class="icon-call text-green"></div>
      <!-- /ko -->
      <!-- ko if: message.was_missed() -->
        <div class="icon-end-call text-red"></div>
      <!-- /ko -->
    </div>
    <div class="message-header-label">
      <span class="message-header-sender-name" data-bind='text: message.sender_name()'></span>
      <span class="ellipsis" data-bind="text: message.caption()"></span>
    </div>
    <div class="message-body-actions">
      <time class="time" data-bind="text: message.display_timestamp_short(), attr: {'data-timestamp': message.timestamp}"></time>
    </div>
  </div>
</script>

<script type="text/html" id="delete">
  <div class="message-header">
    <div class="message-header-icon">
      <participant-avatar class="sender-avatar" params="participant: message.user, click: $parent.on_message_user_click, size: z.components.ParticipantAvatar.SIZE.X_SMALL"></participant-avatar>
    </div>
    <div class="message-header-label">
      <span class="message-header-label-sender" data-bind='text: message.sender_name()'></span>
      <span class="message-header-label-icon icon-trash" data-bind="attr: {title: message.display_deleted_timestamp()}"></span>
    </div>
    <div class="message-body-actions message-body-actions-large">
      <time class="time" data-bind="text: message.display_deleted_timestamp(), attr: {'data-timestamp': message.deleted_timestamp, 'data-uie-uid': message.id}" data-uie-name="item-message-delete-timestamp"></time>
    </div>
  </div>
</script>

<script type="text/html" id="normal">
  <!-- ko if: !$parent.should_hide_user_avatar($data) -->
    <div class="message-header">
      <div class="message-header-icon">
        <participant-avatar class="sender-avatar" params="participant: message.user, click: $parent.on_message_user_click, size: z.components.ParticipantAvatar.SIZE.X_SMALL"></participant-avatar>
      </div>
      <div class="message-header-label">
        <span class="message-header-label-sender" data-bind='css: message.accent_color(), text: message.user().first_name()' data-uie-name="sender-name"></span>
        <!-- ko if: message.user().isBot -->
          <span class="message-header-label-service" data-bind="l10n_text: z.string.conversationBotUser"></span>
        <!-- /ko -->
        <!-- ko if: was_edited() -->
          <span class="message-header-label-icon icon-edit" data-bind="attr: {title: message.display_edited_timestamp()}"></span>
        <!-- /ko -->
      </div>
    </div>
  <!-- /ko -->
  <div class="message-body">

    <!-- ko foreach: {data: message.assets, as: 'asset'} -->
      <!-- ko if: asset.is_image() -->
        <div class="message-asset-image">
          <div class="image image-loading" data-bind="
            attr: {'data-uie-visible': $parent.visible() && !message.is_expired()},
            background_image: asset.resource,
            click: function(data, event) {$parents[1].show_detail(message, event)},
            css: {'bg-color-ephemeral': message.is_expired()},
            viewport_changed: $parents[1].viewport_changed
            " data-uie-name="go-image-detail">
            <!-- ko ifnot: message.is_expired() -->
              <img class="image-element" data-bind="attr: {src: asset.dummy_url}"/>
              <span class="image-placeholder-icon">
                <div class="three-dots">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </span>
            <!-- /ko -->
            <!-- ko if: message.is_expired() -->
              <div class="icon-library flex-center full-screen text-white"></div>
              <img class="image-element image-ephemeral" data-bind="attr: {src: asset.dummy_url}"/>
            <!-- /ko -->
          </div>
        </div>
      <!-- /ko -->
      <!-- ko if: asset.is_text() -->
        <!-- ko if: asset.should_render_text -->
          <div class="text" data-bind="html: asset.render(), css: {'text-graphite': $parent.is_editing, 'text-large': z.util.emoji.includes_only_emojies(asset.text), 'text-graphite': message.status() === z.message.StatusType.SENDING, 'ephemeral-message-obfuscated': message.is_expired()}" dir="auto"></div>
        <!-- /ko -->
        <!-- ko foreach: asset.previews() -->
          <link-preview-asset class="message-asset" data-bind="css: {'ephemeral-asset-expired': message.is_expired()}" params="message: message"></link-preview-asset>
        <!-- /ko -->
      <!-- /ko -->
      <!-- ko if: asset.is_video() -->
        <video-asset class="message-asset" data-bind="css: {'ephemeral-asset-expired icon-movie': message.is_expired()}" params="message: message"></video-asset>
      <!-- /ko -->
      <!-- ko if: asset.is_audio() -->
        <audio-asset class="message-asset" data-bind="css: {'ephemeral-asset-expired icon-microphone': message.is_expired()}" params="message: message"></audio-asset>
      <!-- /ko -->
      <!-- ko if: asset.is_file() -->
        <file-asset class="message-asset" data-bind="css: {'ephemeral-asset-expired icon-file': message.is_expired()}" params="message: message"></file-asset>
      <!-- /ko -->
      <!-- ko if: asset.is_location() -->
        <location-asset params="asset: asset"></location-asset>
      <!-- /ko -->
    <!-- /ko -->

    <!-- ko if: !message.other_likes().length && message.is_reactable() -->
      <div class="message-body-like">
        <span class="message-body-like-icon like-button message-show-on-hover" data-bind="attr: {'data-ui-value': message.is_liked()}, css: {'like-button-liked': message.is_liked()}, style: {opacity: message.is_liked() ? 1 : ''}, click: $parent.click_on_like">
          <span class="icon-like-small"></span>
          <span class="icon-liked-small"></span>
        </span>
      </div>
    <!-- /ko -->

    <div class="message-body-actions">
      <span class="context-menu icon-more font-size-xs" data-bind="click: $parent.on_context_menu_click"></span>
      <!-- ko if: message.ephemeral_status() === z.message.EphemeralStatusType.ACTIVE -->
        <time class="time" data-bind="text: message.display_timestamp_short(), attr: {'data-timestamp': message.timestamp, 'data-uie-uid': message.id, 'title': message.ephemeral_caption()}"></time>
      <!-- /ko -->
      <!-- ko ifnot: message.ephemeral_status() === z.message.EphemeralStatusType.ACTIVE -->
        <time class="time" data-bind="text: message.display_timestamp_short(), attr: {'data-timestamp': message.timestamp, 'data-uie-uid': message.id}"></time>
      <!-- /ko -->
      <!-- ko if: $parent.is_last_delivered_message(message) -->
        <span class="message-status" data-bind="l10n_text: z.string.conversationMessageDelivered"></span>
      <!-- /ko -->
      <!-- ko if: message.ephemeral_status() === z.message.EphemeralStatusType.ACTIVE -->
        <ephemeral-timer class="message-ephemeral-timer" data-bind="attr: {'title': message.ephemeral_caption()}" params="message: message"></ephemeral-timer>
      <!-- /ko -->
    </div>

  </div>
  <!-- ko if: message.other_likes().length -->
    <div class="message-footer">
      <div class="message-footer-icon">
        <span class="like-button" data-bind="attr: {'data-ui-value': message.is_liked()}, css: {'like-button-liked': message.is_liked()}, style: {opacity: message.is_liked() ? 1 : ''}, click: $parent.click_on_like">
          <span class="icon-like-small"></span>
          <span class="icon-liked-small"></span>
        </span>
      </div>
      <div class="message-footer-label cursor-pointer" data-bind="click: function() {$data.show_likes(true)}">
        <span class="font-size-xs text-graphite" data-bind="text: like_caption, attr: {'data-uie-value': reactions_user_ids()}"  data-uie-name="message-liked-names"></span>
        <!-- ko if: !message.show_likes() && message.other_likes().length > 5 -->
          <span class="icon-more font-size-xs"></span>
        <!-- /ko -->
      </div>
      <!-- ko if: message.show_likes() -->
        <div class="message-footer-bottom" data-uie-name="message-liked-avatars">
          <!-- ko foreach: message.reactions_user_ets() -->
            <participant-avatar params="participant: $data, click: $parents[1].on_message_user_click, size: z.components.ParticipantAvatar.SIZE.X_SMALL"></participant-avatar>
          <!-- /ko -->
          <span class="message-footer-close-button icon-close" data-bind="click: function() { $data.show_likes(false) }"></span>
        </div>
      <!-- /ko -->
    </div>
  <!-- /ko -->
</script>

<script type="text/html" id="member">
  <!-- ko if: showLargeAvatar() -->
    <div class="message-connected">
      <span class="message-connected-header" data-bind='text: otherUser().name()'></span>
      <span class="message-connected-username label-username" data-bind='text: otherUser().username()'></span>
      <participant-avatar class="message-connected-avatar avatar-no-badge cursor-default"
                   data-bind="css: {'avatar-no-badge': otherUser().is_outgoing_request()}"
                   params="participant: otherUser, size: z.components.ParticipantAvatar.SIZE.X_LARGE"></participant-avatar>
      <!-- ko if: otherUser().is_outgoing_request() -->
        <div class="message-connected-cancel text-theme"
             data-bind="click: $parent.click_on_cancel_request,
                        l10n_text: z.string.conversationConnectionCancelRequest"
             data-uie-name="do-cancel-request"></div>
      <!-- /ko -->
    </div>
  <!-- /ko -->
  <!-- ko ifnot: showLargeAvatar() -->
    <!-- ko if: showNamedCreation() -->
      <div class="message-group-creation-header">
        <div class="message-group-creation-header-text" data-bind="text: groupCreationHeader()"></div>
        <div class="message-group-creation-header-name" data-bind="text: name()"></div>
      </div>
    <!-- /ko -->
    <!-- ko if: hasUsers() -->
      <div class="message-header">
        <div class="message-header-icon text-graphite">
          <span class="icon-chat" data-bind="visible: isGroupCreation()"></span>
          <span class="icon-minus" data-bind="visible: isMemberRemoval()"></span>
          <span class="icon-plus" data-bind="visible: isMemberJoin()"></span>
        </div>
        <div class="message-header-label">
          <!-- ko if: showSenderName() -->
            <span class="message-header-sender-name" data-bind='text: senderName()'></span>
          <!-- /ko -->
          <span class="ellipsis" data-bind="text: caption()"></span>
          <hr class="message-header-line" />
        </div>
        <!-- ko if: isMemberChange() -->
          <div class="message-body-actions">
            <time class="time" data-bind="text: message.display_timestamp_short(), attr: {'data-timestamp': message.timestamp}"></time>
          </div>
        <!-- /ko -->
      </div>
      <div class="message-body">
        <!-- ko foreach: remoteUserEntities -->
          <!-- ko if: message.isGroupCreation() -->
            <participant-avatar class="avatar-no-border" params="participant: $data, click: $parents[1].on_message_user_click, size: z.components.ParticipantAvatar.SIZE.MEDIUM"></participant-avatar>
          <!-- /ko -->
          <!-- ko if: message.isMemberJoin() || message.isMemberLeave() -->
            <participant-avatar data-bind="css: {'translucent': message.isMemberLeave()}" params="participant: $data, click: $parents[1].on_message_user_click, size: z.components.ParticipantAvatar.SIZE.X_SMALL"></participant-avatar>
          <!-- /ko -->
        <!-- /ko -->
      </div>
    <!-- /ko -->
  <!-- /ko -->
</script>

<script type="text/html" id="ping">
  <div class="message-header">
    <div class="message-header-icon">
      <div class="icon-ping" data-bind="css: message.get_icon_classes"></div>
    </div>
    <div class="message-header-label" data-bind="css: {'ephemeral-message-obfuscated': message.is_expired()}">
      <span class="message-header-sender-name" data-bind='text: message.sender_name()'></span>
      <span class="ellipsis" data-bind="text: message.caption"></span>
    </div>
    <div class="message-body-actions">
      <!-- ko if: message.ephemeral_status() === z.message.EphemeralStatusType.ACTIVE -->
        <time class="time" data-bind="text: message.display_timestamp_short(), attr: {'data-timestamp': message.timestamp, 'data-uie-uid': message.id, 'title': message.ephemeral_caption()}"></time>
        <ephemeral-timer class="message-ephemeral-timer" data-bind="attr: {'title': message.ephemeral_caption()}" params="message: message"></ephemeral-timer>
      <!-- /ko -->
      <!-- ko ifnot: message.ephemeral_status() === z.message.EphemeralStatusType.ACTIVE -->
        <time class="time" data-bind="text: message.display_timestamp_short(), attr: {'data-timestamp': message.timestamp}"></time>
      <!-- /ko -->
    </div>
  </div>
</script>

<script type="text/html" id="system">
  <div class="message-header">
    <div class="message-header-icon text-graphite">
      <span class="icon-edit"></span>
    </div>
    <div class="message-header-label">
      <span class="message-header-sender-name" data-bind='text: message.sender_name()'></span>
      <span class="ellipsis" data-bind="text: message.caption()"></span>
      <hr class="message-header-line" />
    </div>
    <div class="message-body-actions">
      <time class="time" data-bind="text: message.display_timestamp_short(), attr: {'data-timestamp': message.timestamp}"></time>
    </div>
  </div>
  <div class="message-body font-weight-bold" data-bind="text: message.name"></div>
</script>

<script type="text/html" id="unable-to-decrypt">
  <div class="message-header">
    <div class="message-header-icon">
      <span class="icon-sysmsg-error text-red"></span>
    </div>
    <div class="message-header-label ellipsis">
      <span data-bind="html: caption"></span>
      <span>&nbsp;</span>
      <a class="text-theme" data-bind="l10n_text: z.string.conversationUnableToDecryptLink, attr: {'href': link}" rel="nofollow noopener noreferrer" target="_blank"></a>
      <hr class="message-header-line" />
    </div>
  </div>
  <div class="message-body message-body-decrypt-error">
    <div class="message-header-decrypt-error-label" data-bind="html: error_message"></div>
    <!-- ko if: message.is_recoverable -->
      <div class="message-header-decrypt-reset-session">
        <svg class="message-header-decrypt-reset-session-spinner svg-theme spin"
             data-bind="style : {visibility : is_resetting_session() ? 'visible' : 'hidden'}"
             width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" data-uie-name="status-loading">
          <path class="fill-theme" d="M12.416 12.417c-2.374 2.375-6.28 2.33-8.72-.112-2.444-2.442-2.488-6.347-.113-8.72 1.658-1.66 4.12-2.18 6.343-1.394.477.17 1-.08 1.17-.557.167-.477-.083-1-.56-1.17C7.658-.552 4.453.124 2.286 2.29-.808 5.384-.75 10.448 2.4 13.6c3.15 3.152 8.216 3.21 11.312.113 2.165-2.166 2.84-5.37 1.824-8.25-.168-.476-.692-.726-1.17-.558-.476.17-.726.692-.557 1.17.784 2.222.265 4.684-1.394 6.342z"></path>
        </svg>
        <span class="message-header-decrypt-reset-session-action button-label text-theme"
              data-bind="click: $parent.on_session_reset_click, l10n_text: z.string.conversationUnableToDecryptResetSession, style : {visibility : !is_resetting_session() ? 'visible' : 'hidden'}"></span>
      </div>
      <!-- /ko -->
    </div>
  </div>
</script>

<script type="text/html" id="missed">
  <div class="message-header">
    <div class="message-header-icon">
      <span class="icon-sysmsg-error text-red"></span>
    </div>
    <div class="message-header-label" data-bind="l10n_text: z.string.conversationMissedMessages"></div>
  </div>
</script>

<script type="text/html" id="timestamp">
  <div class="message-header message-timestamp" data-bind="css: $parent.get_timestamp_class($data)">
    <div class="message-header-icon">
      <span class="message-unread-dot dot-md bg-theme"></span>
    </div>
    <div class="message-header-label">
      <time data-timestamp-type="normal" class="label-xs" data-bind="relative_timestamp: message.timestamp(), attr: {'data-timestamp': message.timestamp}"></time>
      <time data-timestamp-type="day" class="label-bold-xs" data-bind="relative_timestamp: message.timestamp(), relative_timestamp_day: true, attr: {'data-timestamp': message.timestamp}"></time>
    </div>
  </div>
</script>
